<template>
	<view class="sub-btn">
		<view class="sub-text">
			报名费：<text class="pic">¥{{price}}</text>
		</view>
		<view class="btn" @click="handSub">
			立即报名
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			price: {
				type: [String, Number],
				default: 0
			}
		},
		data() {
			return {

			};
		},
		methods: {
			handSub() {
				this.$emit('handSub')
			}
		}
	}
</script>

<style lang="scss" scoped>
	.sub-btn {
		width: 100%;
		height: 110rpx;
		background: #FFFFFF;
		box-shadow: 0 0 26rpx 0 rgba(18, 27, 83, 0.07);
		position: fixed;
		bottom: 0;
		left: 0;
		text-align: center;
		padding-left: 30rpx;
		line-height: 110rpx;
		@include my-flex();

		.sub-text {
			width: 40%;
			color: $bs-text-color-333;
			font-size: $bs-font-size-big;
			font-weight: bold;

			.pic {
				color: red;
			}
		}

		.btn {
			width: 60%;
			background-color: $bs-color-theme;
			color: #fff;
		}
	}
</style>
